<template>
  <div class="main">
<!-- 添加按钮 -->
  <div class="artAdd">
    <el-button type="success" @click="$router.push('/artadd')">添加文章</el-button>
  </div>
<!-- 文章列表 -->
  <div class="artList">
   <el-table
    :data="tableData"
    stripe
    border
    style="width: 100%">
    <el-table-column
      prop="author"
      label="作者"
      align="center"
      width="80">
    </el-table-column>

    <el-table-column
      prop="title"
      label="标题"
      align="center"
      width="120">
    </el-table-column>

  <!-- 描述截取并提示 -->
    <el-table-column
      prop="desc"
      label="描述"
      align="center"
      width="180">
    <template slot-scope="scope">
      <el-tooltip class="item" effect="light" :content=scope.row.desc placement="top">
       <span>{{scope.row.desc.substr(0,10)+'...'}} </span>
      </el-tooltip>
    </template>
    </el-table-column>

    <el-table-column
      prop="zan"
      label="点赞"
      align="center"
      width="80"
      :formatter="zandata"
      >
    </el-table-column>

   <el-table-column
     prop="thumb"
      label="封面"
      align="center"
      width="150" >
      <template slot-scope="scope">
        <div>
          <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.thumb"
          :preview-src-list="[scope.row.thumb]">
          </el-image>
        </div>
      </template>
    </el-table-column>

     <el-table-column
      prop="timeart"
      label="发布时间"
      align="center"
      :formatter="timeartdata">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      align="center"
      width="200">
      <template slot-scope="scope">
        <el-button  type="text" size="small">
            <el-button type="primary" icon="el-icon-edit" size="small"
            @click="artedit(scope.row.id)">编辑</el-button>
        </el-button>
        <el-button type="text" size="small">
            <el-button type="danger" icon="el-icon-delete" size="small"
            @click="delart(scope.row.id)" >删除</el-button>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
      <!-- 分页 -->
   <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pagesize"
      :current-page="currentpage"
      @current-change="changePage"
      >
   </el-pagination>
     </div>
  </div>
</template>

<script>
import { fetchArtList, DelArtList } from '@api'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      tableData: [],
      total: 0, // 总条数
      currentpage: 1, // 当前页
      pagesize: 5// 一页多少条
    }
  },
  methods: {
    // 删除文章
    delart (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
          onClose: () => {
            DelArtList(id).then(res => {
              if (res.data.code === 200) {
                this.$router.go(0)
              }
            })
          }
        })
      })
    },
    // 增加文章
    artedit (id) {
      this.$router.push(`/artedit/${id}`)
    },
    // 分页处理
    // pageval 当前 函数自带的当前页
    changePage (pageval) {
      this.currentpage = pageval
      this.fetchArtList({
        page: this.currentpage,
        pageSize: this.pagesize
      })
    },
    // 时间渲染格式化
    timeartdata (row, column, cellValue) {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 点赞数量区别渲染
    zandata (row, column, cellValue) {
      if (cellValue >= 200) {
        return <el-tag type="success">{cellValue}</el-tag>
      } else {
        return <el-tag type="danger">{cellValue}</el-tag>
      }
    },
    // 获取列表数据
    fetchArtList () {
      fetchArtList({
        page: this.currentpage,
        pageSize: this.pagesize
      }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.lists
          this.total = res.data.data.total
          console.log(res)
        }
      })
    }
  },
  mounted () {
    this.fetchArtList()
  }
}
</script>

<style lang="scss" scoped>
.main{
  .artAdd{
    margin-bottom: 15px;
  }
  .artList{
    width: 90%;
  }
 /deep/ .is-background{
   margin-top: 20px;
  }

}
</style>
